<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>校园交流平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- 引入vuejs -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--模板通用css-->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入wangEdit富文本编辑器 -->
    <script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
</head>
<body>
    <el-container id="app" v-cloak>
        <div th:replace="fragment/common::header"></div>
            <div class="pad"></div>
            <el-main>
                <el-card  class="box-card">
                    <div class="title">
                        <h1 style="height:50px;line-height:50px;">{{announce.title}}</h1>
                        <el-button style="float:right;" type="primary" plain icon="el-icon-d-arrow-left" @click="returnList">返回公告列表</el-button>
                        <div class="info">
                            <span style="margin-right:10px;color:#606266">{{announce.createtime}}</span>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div class="content" ref="content">
                    </div>
                    
                </el-card>
            </el-main>
            
    </el-container>
    <script th:inline="javascript">
        var editor;
        new Vue({
            el:'#app',
            data(){
                return{
                	activeIndex: '',
                    userName:'张三 ',
                    announceId:'',
                    announce:{}
                }
            },
            created:function(){
            	this.userName=[[${session.userName}]];
            	//获取初始化数据
            	var id=[[${id}]];
            	this.announceId=id;
            	this.getInitData(id);
            },
            methods:{
            	//选择nav选项
            	handleSelect(key, keyPath){
                    switch(key){
                    case '1':
                    	window.location.href="index";
                    	break;
                    case '2':
                    	window.location.href="forum";
                        break;
                    case '3':
                    	window.location.href="blog";
                        break;
                    case '4-1':
                    	window.location.href="http://www.dl-city.com/";
                        break;
                    case '4-2':
                    	window.location.href="http://citytsg.dlut.edu.cn/index.htm";
                        break;
                    case '4-3':
                        window.location.href="http://cityftp.dlut.edu.cn/index.htm";
                        break;
                    case '4-4':
                        window.location.href="http://172.30.2.66/vod/action/indexListAction.do?method=indexShow";
                        break;
                    case '4-5':
                        window.location.href="http://tv.byr.cn/show";
                        break;
                    }
                },
                //获取初始化数据
                getInitData(id){
                	var _this=this;
                	//获取博客数据
                	$.ajax({
                		url:'initannounce',
                		type:'GET',
                		data:{
                			id:id
                		},
                		dataType:'JSON',
                		success:function(data){
                			_this.announce=data;
                			_this.$refs.content.innerHTML=_this.announce.content;
                		}
                	});
                },
                returnList(){
                    window.location.href='announcelist';
                }
              

            }
        })
    </script>
    <style>
        .replyDiv{
		    height: auto;
		    white-space:normal;
		    width:100%;
		    font-size: 14px;
		    line-height: 22px;
		    padding-left: 30px;
		    background: #EBEEF5;
		}
		.comcreate{
		    display: inline-block;
		    height: 22px;
		    font-size: 12px;
		    color: #909399;
		}
		.comfooter{
		    display: inline-block;
		    height: 22px;
		}
		.comcontent{
		    display: inline-block;
		    height: 22px;
		}
		.comuser{
		    display: inline-block;
		    height: 22px;
		    margin-right: 10px;
		}
		.comment{
		    height: auto;
		    white-space:normal;
		    width:100%;
		    border-top:2px dashed #EEEEEE;
		    padding:10px;
		    font-size: 14px;
		    line-height: 22px;
		}
		.content{
		    height:auto;
		}
		.info{
		    height:20px;
		    line-height:20px;
		    margin-top: 30px;
		}
		.title{
		    height: 100px;
		    overflow: hidden;
		    text-overflow:ellipsis;
		    white-space: nowrap;
		}
		.box-card{
		    width:80%;
		    padding:20px;
		    margin:0 auto;
		}
    </style>
</body>
</html>